<template>
  <div>
    <div class="title wrap" >
      <span>礼品分类</span>
      <span>/</span>
      <span>礼品分类</span>
    </div>
    <div class="freeBox wrap">
      <div class="goodsBox">
        <div class="goods">
          <div class="goodsImg"></div>
          <ul class="imgList"></ul>
        </div>
        <div class="goodsInfo">
          <h2>不锈钢大容量保温杯</h2>
          <h2>9900</h2>
          <span></span>
          <p>选择颜色</p>
          <div class="color">
            <div>白色</div>
            <div>黑色</div>
          </div>
          <div class="number">
            <strong>数量 </strong><span> *礼品库存44件</span>
            <div class="btn">
              <div>-</div>
              <div>1</div>
              <div>+</div>
            </div>
          </div>
          <div class="option">
            <div class="green">加入购物车</div>
            <div class="red">立即兑换</div>
          </div>
        </div>
      </div>
      <div class="other">
        <h2>你还可以兑换</h2>
        <ul class="list">
          <li>
            <div class="img"></div>
            <div class="imgInfo">
              <p>叩丁浪校园文化衫</p>
              <div class="price">
                <span>7700</span>
                <span></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang = "less" scoped>
.title {
  padding: 15px 0;
  :first-child {
    font-weight: 700;
  }
  :nth-child(2) {
    padding: 0 5px;
  }
}
.freeBox {
  display: flex;
  justify-content: space-between;

  .goodsBox {
    display: flex;

    /* background-color: #cdc; */
    height: 661.19px;
    .goods {
      .goodsImg {
        width: 475px;
        height: 475px;
        background-color: pink;
      }
      .imgList {
        width: 460px;
        height: 121px;
        background-color: #ccc;
        margin-top: 20px;
      }
    }
    .goodsInfo {
      line-height: 50px;
      padding-left: 30px;

      h2 {
        font-weight: 500;
        font-size: 30px;
        &:nth-child(2) {
          color: rgb(255, 88, 10);
          padding-bottom: 20px;
          border-bottom: 1px #ccc solid;
        }
      }
      .color {
        display: flex;
        width: 120px;
        justify-content: space-between;
        div {
          border: 1px #ccc solid;
          width: 50px;
          height: 44px;
          text-align: center;
          line-height: 44px;
        }
      }
      .number {
        span {
          color: #ccc;
        }
        .btn {
          border: 1px #ccc solid;
          display: flex;
          justify-content: space-between;
          width: 180px;
          :first-child {
            flex: 1;
            border-right: 1px #ccc solid;
          }
          :last-child {
            flex: 1;
            border-left: 1px #ccc solid;
          }
          div {
            text-align: center;

            flex: 2;
          }
        }
      }
      .option {
        display: flex;
        justify-content: space-between;
        color: white;
        padding-top: 20px;
        div {
          padding: 0 30px;
        }
        .green {
          background-color: rgb(67, 147, 67);
        }
        .red {
          background-color: #fd604d;
        }
      }
    }
  }
  .other {
      padding-left: 20px;
    background-color: #cdc;
    border-left: 1px solid #ccc;
  }
}
</style>